<template>
  <div class='container'>
    <el-card class="container_card">
      <!-- 最上方的添加按钮 -->
      <div class="addBtn">
        <span class="toptext">说明：目前支持学科和关键字条件筛选</span>
        <el-button @click="$router.push('/questions/new')" size="small" type="success"><i class="el-icon-edit"></i>新增试题
        </el-button>
      </div>
      <!-- 筛选区域 样式有问题input 不是 响应式 -->
      <div class="filterBox">
        <el-form :model="form" :inline="true" class="demo-form-inline" :label-position="labelPosition"
          label-width="73px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select @change="getSecondSub" v-model="form.subjectID" placeholder="请选择">
                  <template v-if="subList.length">
                    <el-option v-for="item in subList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" placeholder="请选择">
                  <template v-if="secondSubList.length">
                    <el-option v-for="item in secondSubList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="form.tags" placeholder="请选择">
                  <template v-if="threeSubList.length">
                    <el-option v-for="item in threeSubList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="form.keyword" class="content" placeholder="根据题干搜索"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option v-for="item in questionDifficulty" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option v-for="item in questionDirection" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <template v-if="catalogList.length">
                    <el-option v-for="item in catalogList" :key="item.id" :label="item.username" :value="item.id">
                    </el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks" class="content"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item v-model="form.shortName" label="企业简称">
                <el-input class="content"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select @change="getCity" v-model="form.province" class="city" placeholder="请选择">
                  <template v-if="citySelect.province.length">
                    <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
                  </template>
                </el-select>
                <el-select v-model="form.city" class="address" placeholder="请选择">
                  <template v-if="citySelect.province.length">
                    <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="clear">
                <el-button size="small" @click="clearFilter">清除</el-button>
                <el-button @click="searchQuestion" type="primary" size="small">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 总共几条数据区域 -->
      <div class="total">
        <el-row>
          <el-col :span="24">
            <el-alert :title='`数据一共${page.total}条`' type="info" :closable="false" show-icon>
            </el-alert>
          </el-col>
        </el-row>
      </div>
      <!-- 表格和分页 -->
      <template v-if="questionList.length">
        <!-- 表格区域 -->
        <div class="table_box">
          <el-table style="width: 100%" :data="questionList">
            <el-table-column width="115" label="试题编号" prop="number"></el-table-column>
            <el-table-column width="115" label="学科" prop="subject"></el-table-column>
            <el-table-column width="108" label="目录" prop="catalog"></el-table-column>
            <el-table-column width="105" label="题型" prop="questionType"></el-table-column>
            <el-table-column width="280" label="题干">
              <!-- question -->
              <template v-slot="{ row }">
                <span v-html="row.question"></span>
              </template>
            </el-table-column>
            <el-table-column width="175" label="录入时间" prop="addDate"></el-table-column>
            <el-table-column width="80" label="难度" prop="difficulty"></el-table-column>
            <el-table-column width="100" label="录入人" prop="creator"></el-table-column>
            <el-table-column label="操作" v-slot="{ row }">
              <el-row>
                <el-button @click="lookQuestion(row)" type="primary" plain icon="el-icon-view" circle></el-button>
                <el-button @click="$router.push('/questions/new?id=' + row.id)" type="success" plain icon="el-icon-edit"
                  circle></el-button>
                <el-button @click="delQuestion(row.id)" type="danger" plain icon="el-icon-delete" circle></el-button>
                <el-button @click="setChoice(row.id)" type="warning" plain icon="el-icon-check" circle></el-button>
              </el-row>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页区域 -->
        <div class="page">
          <el-row>
            <el-col :span="24">
              <el-pagination background layout="prev, pager, next,sizes,jumper" :page-size="page.pagesize"
                :page-sizes="[5, 10, 20, 50]" :current-page="page.page" :total="page.total"
                @size-change="changepagesize" @current-change="changepage">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </template>
      <template v-else>
        <div style="text-align: center;padding: 30px;">没有你想要的数据</div>
      </template>
    </el-card>
    <!-- 面试题预览区域 -->
    <sanqiQuestionsLook v-if="questionLook" :question="questionContent" :questionLook.sync="questionLook">
    </sanqiQuestionsLook>
  </div>
</template>

<script>
// 获取省和市citys
import { provinces, citys } from '@/api/hmmm/citys.js'
// 导入面试题预览
import sanqiQuestionsLook from '../components/sanqi_questions_Look.vue'
// 获取基础题库数据
import { list, detail, choiceAdd, remove } from '@/api/hmmm/questions'
// 获取学科列表
import { simple } from '@/api/hmmm/subjects'
// 获取二级目录简单列表
import { simple as subSimple } from '@/api/hmmm/directorys'
// 获取三级目录列表
import { simple as threeSimple } from '@/api/hmmm/tags'
// 获取录入人信息
import { simple as userSimple } from '@/api/base/users'
// 处理难度数字问题还有题型方向等数据
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
export default {
  components: { sanqiQuestionsLook },
  data () {
    return {
      labelPosition: 'right',
      form: {
        subjectID: null, // 学科
        catalogID: null, // 二级类目
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 题目类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省市
        city: null // 市级
      },
      page: {
        page: 1,
        pagesize: 5,
        total: 1
      },
      questionList: [], // 初始化页面数据
      subList: [], // 学科列表数据
      secondSubList: [], // 二级目录学科列表
      threeSubList: [], // 三级目录
      questionLook: false, // 面试题预览弹层开关
      questionContent: {}, // 当前点击的面试题内容
      questionTypeList: questionType, // 题干类型
      questionDifficulty: difficulty, // 题目难度和
      questionDirection: direction, // 题目方向
      catalogList: [], // 录入人列表
      citySelect: {
        province: [],
        cityDate: []
      } // 省和市
    }
  },
  created () {
    this.getQuestionInfo()
    this.getSubList()
    this.getCreator()
    this.getCityData()
  },
  methods: {
    // 初始化页面获取数据
    async getQuestionInfo (params) {
      const { data } = await list({ page: this.page.page, pagesize: this.page.pagesize, ...params })
      const newData = this.updateData(data)
      this.page.total = data.counts
      this.questionList = newData
    },
    // 点击页面1，2，3切换页面
    async changepage (page) {
      this.page.page = page
      this.getQuestionInfo()
    },
    // 当页面总数发生变化
    changepagesize (pagesize) {
      this.page.pagesize = pagesize
      this.getQuestionInfo()
    },
    // 有很多地方需要用数据处理 定义一个函数
    updateData (data) {
      const newData = data.items.map(item => {
        // 题干处理
        const newquestionType = questionType.find(Qkey => Qkey.value === item.questionType - 0)
        newquestionType.label = newquestionType.label ? newquestionType.label : '未知'
        item.questionType = newquestionType.label
        // 难度处理
        const newdifficulty = difficulty.find(key => key.value === item.difficulty - 0)
        newdifficulty.label = newdifficulty.label ? newdifficulty.label : '未知'
        item.difficulty = newdifficulty.label
        // 时间处理
        const newdate = new Date(item.addDate).toLocaleString()
        item.addDate = newdate.replace(/\//ig, '-')
        return item
      })
      return newData
    },
    // 获取学科数据列表
    async getSubList () {
      const { data } = await simple()
      this.subList = data
    },
    // 当学科有数据获取二级列表
    async getSecondSub (subjectID) {
      // console.log(subjectID)
      this.form.catalogID = null
      this.form.tags = null
      const { data } = await subSimple({ subjectID: subjectID })
      const { data: subdata } = await threeSimple({ subjectID: subjectID })
      this.threeSubList = subdata
      this.secondSubList = data
    },
    // 清除筛选区域
    clearFilter () {
      this.form = {
        subjectID: null, // 学科
        catalogID: null, // 二级类目
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 题目类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省市
        city: null // 市级
      }
    },
    // 查看面试题弹层
    async lookQuestion (item) {
      const { data } = await detail({ id: item.id })
      this.questionContent = data
      this.questionLook = true
    },
    // 获取录入人信息
    async getCreator () {
      const { data } = await userSimple()
      this.catalogList = data
    },
    // 获取省
    async getCityData () {
      this.citySelect.province = await provinces()
    },
    // 获取县级区
    async getCity (val) {
      this.citySelect.cityDate = await citys(val)
    },
    // 搜索问题
    searchQuestion () {
      this.page = {
        page: 1,
        pagesize: 5
      }
      this.questionList = []
      this.getQuestionInfo(this.form)
    },
    // 添加到精选题库
    setChoice (id) {
      this.$confirm('确认加入精选题库?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ id: id, choiceState: 1 })
        this.page.page = 1
        this.questionList = []
        this.getQuestionInfo()
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
      })
    },
    // 删除基础题库
    delQuestion (id) {
      this.$confirm('确认删除?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.page.page = 1
        this.questionList = []
        this.getQuestionInfo()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {

  // label距离左侧的距离
  .el-form-item__label {
    margin-left: 5px;
  }

  // 跳转页面的左边距
  .el-pagination__jump {
    margin-left: 0;
  }

  // 所有输入框的高度
  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  // 输入框input的宽度
  .el-form-item__content {
    width: 240px;
  }

  // 右下角跳转页面输入框的高度
  .el-pagination__editor.el-input .el-input__inner {
    height: 27px;
  }

  // 下拉框的宽度
  .el-select {
    width: 100%;
  }
}

// form——item的下边距
.el-form--inline .el-form-item {
  margin-bottom: 18px;
  margin-right: 0;
}

// 卡片的外边距
.container_card {
  margin: 10px;

  // 顶部按钮的布局
  .addBtn {
    display: flex;
    justify-content: space-between;

    .toptext {
      font-size: 12px;
      color: pink;
    }
  }

  // 筛选区域的布局
  .filterBox {
    margin-top: 10px;

    // 清除按钮的布局
    .clear {
      display: flex;
      justify-content: end;
    }
  }

  // 总条数的样式
  .total {
    .total_text {
      padding: 10px;
    }
  }

  .table_box {
    margin-top: 18px;
  }

  // 切换页面的样式
  .page {
    text-align: right;
    margin-top: 20px;
  }

  // 城市下拉框的宽度
  .city {
    width: 50%;
  }

  .address {
    width: 50%;
  }
}
</style>
